<template>
  <div class="title">用户列表</div>
  <div class="usercount">
    <span>总用户数：{{count}}</span>
    <span>今日新增用户：{{nowcount}}</span>
    <span>7天新增用户：{{weekcount}}</span>
    <span>30天新增用户数：{{mounthcount}}</span>
  </div>
  <!-- 用户搜索 -->
  <div class="usersearch">
    <label for="usid">用户ID:</label>
    <input type="number"
           id="usid"
           v-model="usid" />
    <label for="usname">用户名称:</label>
    <input type="text"
           id="usname"
           v-model="usname" />
    <label for="usphone">用户手机号:</label>
    <input type="number"
           id="usphone"
           v-model="usphone" />
    <label for>用户注册时间：</label>
    <el-date-picker v-model="value"
                    type="daterange"
                    start-placeholder="Start date"
                    end-placeholder="End date" />
    <button @click="aa">查询</button>
  </div>
  <!-- 用户渲染 -->
  <div>
    <el-table :data=" uscatid.length>=1?uscatid:tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              :row-style="rowState"
              style="width: 100%">
      <el-table-column align="center"
                       prop="user_id"
                       label="用户ID:" />
      <el-table-column align="center"
                       prop="user_name"
                       label="用户名称:" />
      <el-table-column align="center"
                       prop="user_iphone"
                       label="用户手机号" />
      <el-table-column align="center"
                       prop="user_dateTime"
                       label="用户注册时间:" />
      <el-table-column align="center"
                       prop="user_money"
                       label="账户余额:" />
      <el-table-column align="center"
                       prop="user_studyTime"
                       label="累计学习时长:" />
      <el-table-column align="center"
                       prop="user_useTime"
                       label="可用兑换时长:" />
      <el-table-column align="center"
                       label="点击查看:"
                       width="180">
        <template #default="scope">
          <button class="btn"
                  @click="handleEdit(scope.$index, scope.row)">用户卡卷</button>
          <button class="btnt"
                  @click="handleDelete(scope.$index, scope.row)">打卡记录</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <div class="page">
    <el-pagination v-model:currentPage="currentPage"
                   v-model:page-size="pageSize"
                   :page-sizes="[ 2, 5, 6]"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="uscatid.length || count" />
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import timer from "../../utils/timer";
import axios from "axios";
const count = ref(""); //总用户
const nowcount = ref(""); //今日注册用户
const weekcount = ref(""); //七天新增用户
const mounthcount = ref(""); //一月新增用户
const value = ref("");
const usid = ref("");
const usname = ref("");
const usphone = ref("");
const pageSize = ref(2);
const currentPage = ref(1);
const rowState = arg => {
  return {
    height: "0px",
    "font-size": "12px",
    align: "center"
  };
};
// 打卡
const handleEdit = (index, row) => {
  router.push(
    `./usercard?user_id=${row.user_id}&user_iphone=${row.user_iphone}`
  );
};
// 卡卷
const handleDelete = (index, row) => {
  router.push({
    path: "./cardhistory",
    query: {
      user_id: row.user_id,
      user_iphone: row.user_iphone
    }
  });
};
// 查询
const aa = function () {
  let ca = new Date(value._value[0]);
  let cb = new Date(value._value[1]);
  ca.toLocaleDateString().replace(/\//g, "-");
  cb.toLocaleDateString().replace(/\//g, "-");

  let aer = [];

  uscatid.value = tableData.value.filter(item => {
    if (usid.value) {
      usname.value = "";
      usphone.value = "";
      ca = "";
      cb = "";
      value.value = "";

      return item.user_id == usid.value;
    } else {
      if (usname.value && isNaN(ca.getTime())) {
        return item.user_name.includes(usname.value);
      }
      if (usphone.value) {
        return item.user_iphone.includes(usphone.value);
      }
      if (ca != undefined) {
        return (
          ca.getTime() - new Date(item.user_dateTime).getTime() < 0 &&
          cb.getTime() - new Date(item.user_dateTime).getTime() > 0 &&
          item.user_name.includes(usname.value)
        );
      }
    }
  });
  usid.value = "";
  usname.value = "";
  usphone.value = "";
  value.value = "";
};
let uscatid = ref([]);
const tableData = ref([]);
// 获取后台用户数据
onMounted(() => {
  axios({
    url: "/getUserData"
  })
    .then(res => {
      count.value = res.data.data.data.length;
      mounthcount.value = res.data.data.newAddUser; //30天新增用户
      tableData.value = res.data.data.data;
      let aa = [];
      tableData.value.filter(item => {
        return aa.push(item.user_dateTime);
      });
      let ct = [];
      aa.filter(item => {
        return ct.push(timer(item));
      });
      let nowlength = [];
      let weeklength = [];
      ct.filter(item => {
        if (item < 1) {
          return nowlength.push(item);
        } else if (item < 8) {
          return weeklength.push(item);
        } else {
          return 0;
        }
      });
      nowcount.value = nowlength.length; //当日新增用户
      weekcount.value = weeklength.length + nowlength.length; //七天新增用户
    })
    .catch(error => {
      console.log(error);
    });
});
// 路由跳转;
const router = useRouter();
// 查看卡卷
const getUsercardstock = () => {
  router.push("./usercard");
};
// 打卡记录
const Punchingcard = () => {
  router.push("./cardhistory");
};
</script>

<style scoped lang='scss'>
.title {
  font-weight: 700;
  font-size: 20px;
  padding-bottom: 10px;
}
.usercount {
  padding-bottom: 10px;
  span {
    display: inline-block;
    width: 200px;
  }
}
.usersearch {
  height: 50px;
  line-height: 50px;
  background-color: #d7d7d7;
  input {
    width: 100px;
    height: 25px;
    margin-right: 20px;
    border: 0 solid #000;
  }
  button {
    float: right;
    margin-top: 10px;
    width: 70px;
    height: 30px;
    margin-right: 20px;
    background-color: #555555;
    color: #fff;
    border: 0 solid #000;
  }
}
.btn,
.btnt {
  font-size: 12px;
  padding: 0;
  background-color: transparent;
  border: 0 solid #000;
  color: #02a7f0;
  cursor: pointer;
}
.btn {
  margin-right: 5px;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.page {
 .el-pagination {
    justify-content: center;
  }
}
</style>